@model IEnumerable<NavigatableNode>
<table style="width: 100%; border: 1px solid #cccccc; background-color: #ffffff;
    color: #000000;" cellpadding="0" cellspacing="0">
    <tr>
        <td style="width: 200px; padding: 2px;vertical-align:top;">
            @{
                Ajax.Dna().ListBox("WidgetInstalledPathList")
                    .Width(200)
                    .Height(400)
                    .Options(opts =>
                    {
                        opts.OnItemSelected = "$(\"#WidgetDescriptorList\").listbox(\"loadData\",\"" + Url.Action("List", "Widget", new { Area = "" }) + "\",{path:ui.value});";
                    })
                    .Select("Shared")
                    .Bind(Model)
                    .Render();
            }
        </td>
        <td id="widgetListContainer" style="width: 400px; padding: 2px;vertical-align:top;">
            @{
                Ajax.Dna().ListBox("WidgetDescriptorList")
                    .Width(400)
                    .Height(365)
                    .Options(opts => { opts.OnItemSelected = "_descroptorSelect();"; })
                    .Bind(Url.Action("List", "Widget", new { Area = "", path = "shared" }))
                    .Pagable(pageSize:10000)
                    .ClientItemTemplate(@<text>
                <li>
                    <table style="width: 100%;">
                        <tr>
                            <td>
                                <div style="padding: 5px;">
                                    <img src="{{if IconUrl}} ${IconUrl} {{else}} @Url.Content("~/content/images/icon_component_16.gif") {{/if}}"
                                    alt="" style="float: left; margin-right: 5px;" />
                                    <b>${Title}</b>
                                </div>
                            </td>
                            <td style="width: 50px;">
                                <b>${Version}</b>
                            </td>
                        </tr>
                    </table>
                    <div style="clear: left; padding: 2px 5px 2px 30px; color: #858681; white-space: normal;
                        border-bottom: 1px solid #cccccc;">
                        ${Description}</div>
                </li>
                </text>)
                .Render();

                Ajax.Dna().Toolbar()
                    .Buttons(btns =>
                    {
                        btns.AddButton(Html.Global("RES_ADD"), "_addWidgetToPage();").ImageIcons(Url.Content("~/content/images/icon_add_16.png"));
                        btns.AddButton(Html.Global("RES_IMPORT")).ImageIcons(Url.Content("~/content/images/icon_upload_16.gif")).Name("btnImportWidget");
                        btns.AddLabel(Html.Global("RES_TO")+":");
                        btns.Add().Template(@<text>
                <input id="inpagezones" style="width: 100px;" />
                <div style="display: none;">
                    <ul id="inpagezones_list">
                    </ul>
                </div>
                </text>);
                        btns.AddSpliter();
                        btns.AddButton(Html.Global("RES_PREVIEW"), "_previewWidget();").ImageIcons(Url.Content("~/content/images/icon_search_page_16.png"));
                        btns.AddSpliter();
                        btns.AddImageButton(Url.Content("~/content/images/icon_help_16.png"), "window.open(\"" + Url.Help(7) + "\");");
                    })
                    .Render();
            }
        </td>
        <td style="padding: 5px;vertical-align:top;">
            <div id="widgetpreviewzone" class="d-state-empty" style="height: 376px; overflow: auto;">
            </div>
        </td>
    </tr>
</table>
<script type="text/javascript">
    function _loadInPageZones() {
        var zones = $(".d-widget-zone"), _container = $("#inpagezones_list"), _default = "";
        zones.each(function (i, n) {
            var item = $("<li/>"), zone = $(n), _valEl = $("<input type='hidden' />"), _txtEl = $("<span/>");
            _txtEl.text(zone.attr("title") ? zone.attr("title") : zone.attr("id"))
                    .appendTo(item);
            _valEl.val(zone.attr("id")).appendTo(item);
            if (i == 0)
                _default = _valEl.val();
            item.appendTo(_container);
        });

        $("#inpagezones").combo({
            source: _container,
            dropdownStyle: "dropdownlist",
            selectedValue: _default,
            selected: function (event, ui) {
                zones.removeClass("d-widget-zone-selected");
                $("#" + ui.value).addClass("d-widget-zone-selected");
            }
        });
        $("#" + _default).addClass("d-widget-zone-selected");

        new AjaxUpload("btnImportWidget", {
            action: '@Url.Action("Import", "Widget", new { Area = "" })',
            name: "importedFile",
            responseType: "json",
            data: {},
            onChange: function (file, extension) {
                this.setData({
                    "url": document.URL,
                    "zoneID": $("#inpagezones").combo("option", "selectedValue"),
                    pos: 0
                });
            },
            onSubmit: function (file, extension) {
                //uiHelper.blockUI();
            },
            onComplete: function (file, response) {
                //uiHelper.unblockUI();
                if (response) {
                    $("#widget_template").tmpl(response)
                                           .prependTo($("#" + $("#inpagezones").combo("option", "selectedValue")))
                                           .portlet({
                                               design: true,
                                               baseUrl: '@Url.Content("~/Widget/")'
                                           });
                }
            }
        });
    }

    function _descroptorSelect() {
        var previewZone = $("#widgetpreviewzone");
        if (!previewZone.hasClass("d-state-empty")) {
            _previewWidget();
        }
    }

    function _previewWidget() {
        var element = $("#WidgetDescriptorList").listbox("option", "selectedItem"), dat = $.tmplItem(element).data,
       previewZone = $("#widgetpreviewzone");
        previewZone.empty();

        if (previewZone.hasClass("d-state-empty")) {
            previewZone.closest(".ui-dialog").animate({ width: "1000px" }, {
                duration: 200,
                complete: function () {
                    previewZone.removeClass("d-state-empty").css({ width: "376px" });
                    dat.IsExpanded = true;
                    $("#widget_template").tmpl(dat).appendTo(previewZone)
                                                          .portlet({
                                                              preview: true,
                                                              design: true,
                                                              baseUrl: '@Url.Content("~/Widget/")'
                                                          });

                }
            });
        }
        else {
            dat.IsExpanded = true;
            $("#widget_template").tmpl(dat)
                                           .appendTo(previewZone)
                                           .portlet({
                                               preview: true,
                                               design: true,
                                               baseUrl: '@Url.Content("~/Widget/")'
                                           });
        }
    }

    function _addWidgetToPage() {
        var element = $("#WidgetDescriptorList").listbox("option", "selectedItem"), dat = $.tmplItem(element).data,
       zoneID = $("#inpagezones").combo("option", "selectedValue"),
       selectedZone = $("#" + zoneID);

        $.post('@Url.Action("AddTo", "Widget", new { Area = "" })',
       {
           wid: dat.ID,
           url: document.URL,
           zoneID: zoneID,
           pos: 0
       },
       function (_instance) {
           $("#widget_template").tmpl(_instance)
                                           .prependTo(selectedZone)
                                           .portlet({
                                               design: true,
                                               baseUrl: '@Url.Content("~/Widget/")'
                                           });
       });
    }

</script>
@{Html.RegisterStartupScript("_loadInPageZones();");}
@Html.StartupScripts()
